<template>
	<view class="detail-ap">
		<!-- 切换导航栏 -->
		<view class="tabList">
			<v-tabs v-model="tabCurrent" :scroll="false" :tabs="tabList" @change="tabChange" ></v-tabs>	
		</view>
		<scroll-view scroll-y class="main" :scroll-top="scrollTop" @scroll="scroll">
			<view class="mian-title">
				<view class="xq_title">
					渣土车精准预警
				</view>
				<view class="xq_type" v-if="detailList.isClosed==0">
					当前处置进度：{{nodeName}}
				</view>

			</view>
			<swiper :current="tabCurrent" style="height: 72vh;overflow: scroll;" @change="changesw">
				<swiper-item class="swiper-item">
					<view class="forms">
						<view class="Category_title">
							<view class="line"></view>开单信息
						</view>
						<view class="items">
							<view class="field">
								类型
							</view>
							<view class="content">
								{{yjtype || '暂无' }}
							</view>
						</view>
						<view class="items">
							<view class="field">
								{{yjtype=='车队预警' ? '卡口' : '车牌'}}
							</view>
							<view class="content">
								{{ getcarnumber || '暂无' }}
							</view>
						</view>
						<view class="items">
							<view class="field">
								地点
							</view>
							<view class="content" style="color: #303133;" @click="navigationToEvent(location)"  >
								{{address || '暂无' }}
							</view>
						</view>

						<view class="items">
							<view class="field">
								预警时间
							</view>
							<view class="content">
								{{yjtime || '暂无' }}
							</view>
						</view>
						<view class="items">
							<view class="field">
								派单时间
							</view>
							<view class="content">
								{{pdtime || '暂无' }}
							</view>
						</view>
						<view class="items">
							<view class="field">
								卡口名称
							</view>
							<view class="content">
								{{occurenceLocation || '暂无' }}
							</view>
						</view>
						<view class="items">
							<view class="field">
								图片
							</view>
							<view class="" style="display: flex; flex-wrap: wrap;">
								<view class="showpdf" v-for="item in imgs">
									<img class="pho" :src="item.url" @click="previewPic(item.url)" alt="">
								</view>
							</view>
						</view>
						<view class="items">
							<view class="field">
								描述
							</view>
							<view class="" style="display: flex; flex-wrap: wrap;">
								<u-input :enableNative="false" style="" v-model="pass_value" :type="type" :border="border"
									:maxlength="500" :height="height" placeholder="请输入通过意见" />
							</view>
						</view>
						<view class="items"  style="flex-direction: column;padding-left: 20rpx;" v-for="(item,index) in nameList"
							:key="index">
							<view class="" style="display: flex;">
								<view class="field" style="width: 400rpx;">
									{{item.name}}
								</view>
							</view>
							<file-upload   :editFlag="true" :listType="index" :picUrlList="item.picList"
								@updateUrlList="updateUrlList"></file-upload>
						</view>
						
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<circullog :ids="idd" :nodeName='nodeName' v-if="tabCurrent==1"></circullog>
				</swiper-item>
			</swiper>
		</scroll-view>
		<!-- 画地图 -->
		<u-popup v-model="showpop" mode="bottom " :border-radius="border_radius" mask  duration = '250' >
			<view class="pop">
				<view class="title">
					<view class="" @click="showpop=false">
						取消
					</view>
					<view class="">
						{{  buttontype==2 ? '处置' : '退单整改'  }}
					</view>
					<view v-if="buttontype==3" style="color: #007AFF;" @click="passout">
						确认
					</view>
					<view class="" v-else style="color: #007AFF;" @click="comfirm">
						确认
					</view>
				</view>
				<view class="" style="margin:50rpx 20rpx 50rpx 20rpx ">
					<u-input :enableNative="false" style="" v-model="type_value" :type="type" :border="border"
						:height="height" placeholder="请填写内容" />
				</view>
				<view class="items"  style="flex-direction: column;padding-left: 20rpx;" v-for="(item,index) in nameList"
					:key="index">
					<view class="" style="display: flex;">
						<view class="field" style="width: 400rpx;">
							{{item.name}}
						</view>
					</view>
					<file-upload   :editFlag="true" :listType="index" :picUrlList="item.picList"
						@updateUrlList="updateUrlList"></file-upload>
				</view>
				<!-- <auit-pop  ></auit-pop> -->
			</view>
		</u-popup>
		
		<u-toast ref="uToast" />
		<view class="footer" >
			<view class="">
				
				<button class="taketask" v-if="orderType == 0" type="default" @click="taketask">任务认领</button>
				<view class="footer" v-else>
					<view class="footer" v-if="buttontype==2">
						<button class="confim" type="default" @click="showpop=true">处置</button>
					</view>
					<view class="footer" v-else>
						<!-- <button class="chuzhi" type="default" @click="showpop=true">退单整改</button> -->
						
						<button class="chuzhi" type="default" @click="comfirm">处置</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		yjxxdetail
	} from '@/pages/api/report/orderp.js'
	import {
		mapState
	} from 'vuex'
	import methodMix from '@/pages/index/listCard/workorderList/methodMix_workorder.js'
	import circullog from '@/pages/index/listCard/circulLog/index.vue'
	import fileUpload from '@/components/fileUpload/index.vue'
	import auitPop from '@/components/auitPop/auitPop.vue'
	export default {
		mixins: [methodMix],
		components: {
			circullog,
			fileUpload,
			auitPop
		},
		filters:{
			filtersA(value){
				return value + 'zzz'
			}
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				picUrlList: [
					// 'https://wyc-store.oss-cn-shanghai.aliyuncs.com/deqing/zhatu/1628423927320jpg20210812175526643.jpeg',
					// 'https://wyc-store.oss-cn-shanghai.aliyuncs.com/deqing/zhatu/Screenshot_2021-08-09-08-55-04-49_ca6ee20236ea15ad01663c6ea4ca0bdbjpg20210812175425367.jpeg',
					// 'https://wyc-store.oss-cn-shanghai.aliyuncs.com/deqing/zhatu/IMG20210811230327jpg20210812175439910.jpeg',
				],
				nameList: [{
					name: '上传图片',
					id: 'pic',
					picList: []
				}],
				id: '',
				detailList: {},
				formarr: [],
				getphotolist: [],
				chuzhiphotolist: [],
				showpop: false,
				showpart: false,
				showmap: false,
				closeable: false,
				type: 'textarea',
				autoup: false,
				border: false,
				height: 240,
				type_value: '',
				border_radius: '30rpx',
				orderType: '',
				nodeId: '',
				list: [],
				activelist: [],
				flag: false,
				idd: '',
				buttontype: 0,
				outorder: 0,
				detailmsg: {},
				checkop: '',
				action: 'http://47.96.237.231:8085/zhatu/file/upload',
				tabList: ['预警详情', '预警历史'],
				tabCurrent: 0,
				nodeName: '',
				emp: 'https://wyc-store.oss-cn-shanghai.aliyuncs.com/deqing/zhatu/emp20210805114713397.png',
				stepsnumber: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				getcarnumber: '',
				yjtime: '',
				location: '',
				imgs: [],
				yjtype: '',
				chuzhilist: [],
				address:'',
				pass_value:'',
				occurenceLocation:'', //卡口名称
				pdtime:'',//派单时间
			}
		},
		computed: {
			...mapState('enforce_law', ['infoItem']),
		},
		onLoad(op) {
			this.infoItem
			this.id = this.infoItem.recordId
			this.nodeId = this.infoItem.nodeId
			this.flag = this.infoItem.flag
			this.idd = this.infoItem.id
			this.checkop = this.infoItem.checkop
			this.nodeName = this.infoItem.nodeName
			console.log('历史不可修改', this.checkop, this.stepsnumber, this.idd)
		},
		mounted() {
			this.getdetail()
			// this.getdetailstr()
		},
		methods: {
			//获取详情
			getdetailstr() {
				return new Promise((resolve, reject) => {
					yjxxdetail({
						ordersId: this.idd
					}).then(res => {
						console.log(res)
						this.detailList = res
						this.orderType = this.detailList.orderType
						this.buttontype = this.detailList.type
					
						this.detailList.formValue.forEach(d => {
							if (d.display_name == '类型') {
								this.yjtype = d[d.name]
							}
							if (d.display_name == '车牌') {
								this.getcarnumber = d[d.name]
							}
							if (d.display_name == '时间') {
								this.yjtime = d[d.name]
							}
							if (d.display_name == '位置') {
								this.location = d[d.name]
								
							}
							if (d.display_name == '图片') {
								this.imgs = d[d.name]
							}
						})
						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})
			},
			// 导航
			navigationToEvent(loac) {
				      
						// const latitude = 116.396574;
						// const longitude = 39.992706;
						this.test.getRegeo({
							location:   parseFloat(this.location[0]) + ',' + parseFloat(this.location[1]) , //location的格式为'经度,纬度'
							//成功回调
							success: (data)=> {
								console.log(data)
								this.address = data[0].regeocodeData.formatted_address
								uni.openLocation({
								    latitude: parseFloat(this.location[1]),
								    longitude: parseFloat(this.location[0]),
									name:data[0].name,
									address:data[0].regeocodeData.formatted_address,
								    success: function () {
								        console.log('success');
								    }
								});
							},
							fail: function(info) {
								//失败回调
								console.log(info)
							}
						})
				 
			},
			// navigationToEvent() {
			// 	uni.getLocation({
			// 	    type: 'wgs84', //返回可以用于uni.openLocation的经纬度
			// 	    success:  (res)=> {
			// 	        const latitude = parseFloat(res.latitude);
			// 	        const longitude =parseFloat(res.longitude) ;
			// 			console.log(latitude,longitude)
			// 			// const latitude = 116.396574;
			// 			// const longitude = 39.992706;
			// 			this.test.getRegeo({
			// 				location: longitude + ',' + latitude, //location的格式为'经度,纬度'
			// 				//成功回调
			// 				success: (data)=> {
			// 					console.log(data)
								
			// 					uni.openLocation({
			// 					    latitude: latitude,
			// 					    longitude: longitude,
			// 						name:data[0].name,
			// 						address:data[0].regeocodeData.formatted_address,
			// 					    success: function () {
			// 					        console.log('success');
			// 					    }
			// 					});
			// 				},
			// 				fail: function(info) {
			// 					//失败回调
			// 					console.log(info)
			// 				}
			// 			})
				       
			// 	    }
			// 	});
			// },
			//更新图片地址
			updateUrlList(list, type) {
				console.log('list', list, type)
				// let formList = ['chukou','chongxi','fangchen','dibang','shipin','qita']
				this.chuzhilist = list
				console.log(this.chuzhilist)
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-ap {
		height: 100vh;
		width: 750rpx;
		display: flex;
		flex-direction: column;

		.swiper-item {
			overflow-y: auto;
		}

		.main {
			flex: 1;
			overflow: hidden;
			width: 750rpx;
			background-color: #fff;
			// overflow-x: hidden;

			.mian-title {
				margin-top: 80rpx;
				padding: 32rpx;
				height: 96rpx;
				background-color: #FFFFFF;

				.xq_title {
					font-weight: 600;
					font-size: 40rpx;
					color: #363A44;
					margin-bottom: 24rpx;
				}

				.xq_type {
					font-size: 28rpx;
					color: #B5B7BA;
				}
			}

			.forms {
				// margin-top: 22rpx;
				padding: 26rpx 32rpx 26rpx 0rpx;
				width: 750rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				height: 100%;

				.Category_title {
					display: flex;
					font-weight: 600;
					font-size: 32rpx;
					color: #428FFC;
					height: 92rpx;
					background-color: #F6F7F8;
					line-height: 100rpx;
					padding-left: 32rpx;

					.line {
						height: 32rpx;
						margin: 32rpx 16rpx 0 0;
						width: 4rpx;
						background-color: #428FFC;
					}
				}

				.items {
					display: flex;
					padding: 26rpx 0 26rpx 0;
					font-size: 32rpx;
					margin-left: 32rpx;
					margin-right: 32rpx;
					border-bottom: 2rpx solid #E8E9EC;

					.field {
						width: 242rpx;
						color: #B3B5B9;
						margin-right: 8rpx;

						.showpdf {
							margin-top: 16rpx;
							padding: 10rpx;
							height: 200rpx;
							width: 200rpx;
							border: 1rpx solid #E8E9EC;
							border-radius: 10rpx;
							display: flex;
							justify-content: center;
							flex-wrap: wrap;
							align-items: center;
							position: relative;

							.pho {
								height: 200rpx;
								width: 200rpx;
								padding: 10rpx;
							}
						}
					}

					.content {
						width: 440rpx;
						color: #B3B5B9;
						// color: #363A44;
					}
				}

				.line {
					height: 5rpx;
					background-color: #F2F3F5;
				}
			}
		}

		.footer {
			display: flex;
			justify-content: center;

			width: 750rpx;
			height: 128rpx;
			background-color: #FFFFFF;

			box-shadow: 2rpx 0 6rpx rgba(0, 0, 0, .12), 0 0 6rpx rgba(0, 0, 0, .04);

			.heyan {
				height: 87rpx;
				width: 120rpx;
				border: 1rpx solid #428FFC;
				border-radius: 20rpx;
				font-size: 25rpx;
				color: #FFFFFF;
				background-color: #428FFC;
				margin-top: 14rpx;
				// margin-right: 5rpx;
				margin-left: 12rpx;
			}

			.chuzhi {
				height: 87rpx;
				width: 339rpx;
				font-size: 29rpx;
				border: 1rpx solid #428FFC;
				border-radius: 50rpx;
				background-color: #428FFC;
				color: #FFFFFF;
				margin-top: 14rpx;
				margin-left: 16rpx;
			}

			.cancel {
				height: 87rpx;
				width: 339rpx;
				font-size: 29rpx;
				border: 1rpx solid #428FFC;
				border-radius: 50rpx;
				color: #428FFC;
				margin-top: 14rpx;
				// margin-left: 32rpx;
			}

			.confim {
				height: 87rpx;
				width: 639rpx;
				font-size: 29rpx;
				border: 1rpx solid #428FFC;
				border-radius: 50rpx;
				background-color: #428FFC;
				color: #FFFFFF;
				margin-top: 14rpx;
				margin-left: 16rpx;
			}

			.taketask {
				height: 87rpx;
				width: 692rpx;
				line-height: 87rpx;
				border: 1rpx solid #428FFC;
				border-radius: 50rpx;
				background-color: #428FFC;
				color: #FFFFFF;
				margin-top: 14rpx;
			}
		}
	}

	.pop {
		height: 750rpx;
		border-radius: 20rpx;

		.pop_title {
			color: #363A44;
			font-size: 32rpx;
			padding: 40rpx 0 32rpx 32rpx;
			border-bottom: 1rpx solid #EFEFEF;
		}

		.title {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
		}

		.checkbox-group {
			padding: 20rpx;
		}
	}


	img {
		height: 180rpx;
		width: 180rpx;
		margin-right: 20rpx;
	}

	.tabList {
		height: 80rpx;
		width: 750rpx;
		z-index: 99;
		position: fixed;
		top: 0rpx;
		background-color: #FFFFFF;
		border-bottom: .5rpx solid #DBDBDB;
	}

	.arrow {
		margin-left: 50rpx;
		height: 30rpx;
		width: 30rpx;
	}

	.red_line {
		font-size: 20rpx;
		color: red;
		margin-left: 420rpx;
	}

	.person-list-panel {
		// min-height: 400rpx;
	}
</style>
